<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">网格事件处理情况</div>
      <div class="sn-body">
        <div class="wrap-container">

          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
              <tr>
                <td width="60%">
                  <span>标 题</span>
                </td>
                <td width="40%">
                  <span>日 期</span>
                </td>
                <!--<td width="20%">-->
                  <!--<span>处理进度</span>-->
                <!--</td>-->
              </tr>
              </tbody>
            </table>

            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                <tr v-for="(item, index) in listData" :key="index">
                  <td width="100%" class="title">
                    <span>{{ item.title }}</span>
                  </td>
                  <td width="40%">
                    <span>{{ item.date }}</span>
                  </td>
                  <!--<td width="20%">-->
                    <!--<span :class="{colorRed: item.hot > 4999, colorOrange: item.hot < 10}">{{ item.hot }}</span>-->
                  <!--</td>-->
                </tr>
                </tbody>
              </table>
            </vue-seamless-scroll>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import vueSeamlessScroll from 'vue-seamless-scroll'
    export default {
        name: "scanRadius",
        components: {
            vueSeamlessScroll
        },
        data() {
            return {
                listData: [{
                    title: '经网格员XX巡查发现X栋X楼XXX号内 发现存放大量（纸皮）货物 存在安全消防隐患',
                    date: '2020-05-05',
                }, {
                    title: '灭火器已经过期',
                    date: '2020-05-02',
                }, {
                    title: '楼道乱堆乱放',
                    date: '2020-05-02',
                }, {
                    title: '车辆违停',
                    date: '2020-04-25',
                }, {
                    title: '在某地发现电瓶车违规充电有消防安全隐患',
                    date: '2020-04-21',
                }, {
                    title: '进行安全检查，发现不规范、无灭火器、无消防器材',
                    date: '2020-04-20',
                }, {
                    title: '协助开展防汛救灾',
                    date: '2020-04-01',
                }, {
                    title: '协助民警抓获逃犯',
                    date: '2020-03-25',
                }, {
                    title: '劝导商铺老板不得占道经营',
                    date: '2020-03-16',
                }, {
                    title: '劝调家庭矛盾纠纷',
                    date: '2020-03-12',
                }, {
                    title: '积极协助开展创卫',
                    date: '2020-02-28',
                }, {
                    title: '协助处理施工损坏天然气管道问题',
                    date: '2020-02-15',
                }, {
                    title: '协助处理打架伤人事件',
                    date: '2020-02-10',
                }, {
                    title: '协助处置交通事故',
                    date: '2020-02-08',
                }]
            }
        },
        computed: {
            optionSetting () {
                return {
                    step: 0.5, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    // autoPlay: false,
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        mounted() {

        },
        methods: {

        },
        beforeDestroy() {

        }
    };
</script>

<style lang="scss" scoped>
  .sn-container {
    left: 1473px;
    top: 730px;
    width: 435px;
    height: 30%;
    %table-style {
      width: 100%;
      height: 35px;
      table-layout: fixed;
      tr {
        td {
          padding: 10px 5px;
          text-align: center;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          color: #E2E5FF;
          font-size: 14px;
        }
      }
    }
    .table {
      .table-header {
        @extend %table-style;
      }
      .seamless-warp {
        height: 400px;
        overflow: hidden;
        visibility: visible;
        .colorRed {
          color: #FF4669;
        }
        .colorOrange {
          color: #FFC956;
        }
        .item {
          height: auto;
          @extend %table-style;
          tr {
            td {
              &.title {
                text-overflow: ellipsis;
                display: inline-block;
              }
            }
          }
        }
      }
    }
  }
</style>